<template>
  <!-- 抽奖记录 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="openFilter"><i-tabler-filter-edit />{{ t("RescueFund.text13") }}</h4>
    </h1>
    <ul class="information-content-h5__list">
      <li v-for="item in list" :key="item.id">
        <div class="lucy-list">
          <p class="gift" v-if="item.itemType == 2">
            <img :src="getWalletIcon(item.giftType)" alt="">
            <span>{{ Number(item.giftContent).toFixed(2) }}</span>
          </p>
          <span v-if="item.itemType == 4">{{ $t("lotteryRecord.text38") }}</span>
          <h3>{{ parseTime(item.lotteryTime) }}</h3>
          <h4>{{ t(getEnumValue('lotteryRecordStatus', `${item.status}`)) }}</h4>
        </div>
      </li>
    </ul>
    <!-- 过滤框 -->
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      class="mine-h5-popup"
    >
      <el-form :model="form" ref="passwordFormRef" class="mine-h5-popup-content" size="small">
        <el-form-item prop="currencyId" class="z-form-item-flex average">
          <el-input v-model="form.startDate" placeholder="Approved by" @focus="showStartDate = true" />
          <el-input v-model="form.endDate" placeholder="Approved by" @focus="showEndDate = true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="h5-popup-search-button" @click="search">{{t('BetRecord.Search')}}</el-button>
        </el-form-item>
      </el-form>
    </van-popup>
    <!-- startDate -->
    <van-popup
      v-model:show="showStartDate"
      position="bottom"
    >
      <van-date-picker
        v-model="form.startDateHanlder"
        title="选择日期"
        :columns-type="['year', 'month', 'day']"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2055, 5, 1)"
        @confirm="confirmStartDate"
        @cancel="showStartDate = false"
      />
    </van-popup>
    <!-- endDate -->
    <van-popup
      v-model:show="showEndDate"
      position="bottom"
    >
      <van-date-picker
        v-model="form.endDateHanlder"
        @confirm="confirmEndDate"
        @cancel="showEndDate = false"
        title="选择日期"
        :columns-type="['year', 'month', 'day']"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2055, 5, 1)"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="LotteryRecordH5">
import lotteryApi from '@/api/modules/lottery';
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import { getEnumValue, getEnumOptions } from '@/utils/enums';
import { parseTime } from '@/utils/format';
import { imageEmits } from 'element-plus';
import { config } from 'process';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaNocache:any = nocache();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const startDate = parseTime(new Date().getTime() - 3600 * 1000 * 24 * 7, 'dateobject');
const endDate = parseTime(new Date(), 'dateobject');

const data:any = reactive({
  showBottom: false,
  showStartDate: false,
  showEndDate: false,
  form: {
    startDate: `${startDate.y}-${startDate.m}-${startDate.d}`,
    endDate: `${endDate.y}-${endDate.m}-${endDate.d}`,
    startDateHanlder: [startDate.y, startDate.m, startDate.d],
    endDateHanlder: [endDate.y, endDate.m, endDate.d],
  },
  navs: getEnumOptions('rescueFundsStatus'),
  active: '',
  currencyNavs: computed(()=>{
    return piniaUserinfo.getWallet.map((im:any)=>{
      return {
        ...im,
        label: im.currencyName,
        active: im.currencyId,
        value: im.currencyId
      }
    })
  }),
  currencyActive: piniaUserinfo.getCurrentWallet.currencyId,
  list: [],
  unclaimed: [],
  unreceived: -1, //是否有待领取的状态标识符
  pagination: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
});

const {
  showBottom,
  showStartDate,
  showEndDate,
  form,
  navs,
  active,
  currencyNavs,
  currencyActive,
  list,
  unclaimed,
  unreceived,
  pagination,
} = toRefs(data);

const getWalletIcon = (id: string) => {
  const wallet = piniaUserinfo.getWallet.find((im:any) => im.currencyId == id);
  return wallet.currencyIcon;
}
// 顶顶顶----
const openFilter = () => {
  showBottom.value = true;
}

// 搜索
const search = () => {
  showBottom.value = false;
  lotteryApi.lotteryRecordList({
    activityId: piniaNocache.getActivity.activityId,
    endTime: form.value.endDate ? form.value.endDate + ' 23:59:59' : '',
    startTime: form.value.startDate ? form.value.startDate + ' 23:59:59' : '',
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
  }).then((response:any)=>{
    console.log(response)
    if(response.code === 200){
      list.value = response.rows || [];
      unclaimed.value = response.rows.filter((item:any) => item.receiveStatus == 0)
      if (unclaimed.value.length > 0) {
        unreceived.value = 1
      } else {
        unreceived.value = -1
      }
    }
  });
}
search();


// 时间选择
const confirmStartDate = ({selectedValues}: any) => {
  form.value.startDate = selectedValues.join('-') + ' 00:00:00';
  showStartDate.value = false;
}
// 时间选择
const confirmEndDate = ({selectedValues}: any) => {
  form.value.endDate = selectedValues.join('-') + ' 23:59:59';
  showEndDate.value = false;
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.lucy-list{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  p{
    display: flex;
    align-items: center;
    img{
      width: var(--rem-20);
      height: var(--rem-20);
      margin-right: var(--rem-5);
    }
  }
  h4,
  h3{
    border-bottom: 0 none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
</style>
